<script setup lang="ts">
import { getDetails } from '@/apis/home.js'
import { ref, onMounted } from 'vue';
const content = ref()
import DOMPurify from 'dompurify';

const fetchData = async () => {
  const res = await getDetails();
  content.value = DOMPurify.sanitize(escape2Html(res.data.content));
  console.log(content.value)
};
onMounted(() => {
  fetchData();
});

function escape2Html(str){
  var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
  return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
    return arrEntities[t];
  });
}
</script>

<template>
  <div class="bg">
    <div class="logo">
      <img src="@imgs/logo.png" alt="logo">
    </div>
    <div class="slogen">
      <div>诚信</div>
      <div>利他</div>
      <div>用心</div>
      <div>主动</div>
      <div>创新</div>
    </div>
  </div>
  <div class="detail">
    <div v-html="content"></div>
  </div>
</template>

<style scoped lang="scss">
.bg {
  width: 100%;
  height: 786px;
  background-image: url("@imgs/weitu.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .slogen {
    font-size: 58px;
    color: #FFFFFF;
    line-height: 58px;
    letter-spacing: 11px;
    text-align: left;
    font-style: normal;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
    > div {
      margin-top: 202px;
      margin-right: 164px;
      &:last-child {
        margin-right: 0;
      }
    }

  }
}
.detail {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 30px;
  padding-bottom: 30px;

  font-size: 23px;
  color: #000000;
  line-height: 29px;
  text-align: left;
  ::v-deep img {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100% !important;
  }

  ::v-deep section {
    background: #fff !important;
  }
  ::v-deep ul {
    background: #fff !important;
  }
  ::v-deep p {
    background: #fff !important;
  }
  min-height: 60vh;
  ::v-deep span {
    background: #fff !important;

    line-height:80px !important;
  }

  ::v-deep div {
    background: #CECECE;
  }

  > div {
    width: $page-width;
  }
}

.logo {
  width: 527px;
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
